<template>
	<view class="asset-index">
		<view class="amount">
			<view class="total-amount">
				<text class="text-gray">总资产：</text>
				<text class="all-amount">{{amount}}</text>
			</view>
		
			<navigator url="add" class="add">添加帐户</navigator>
		</view>
			<view class="uni-list" v-if="accountList.length > 0">
				<view class="uni-list-cell" :style="'background:'+item.bg_color" hover-class="uni-list-cell-hover" v-for="(item,index) in accountList" :key="index">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="item.logo_image"></image>
						<view class="uni-media-list-body">
							<view class="">
								{{item.remark?item.remark:''}} {{item.name}}
								
							</view>
							<view class="">{{item.balance}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-data" v-else>您还没有添加帐户</view>
	
		
	</view>
</template>

<script>
	import base from '../../common/base.js';
	
	export default {
		data() {
			return {
				accountList: [],
				users: [],
				userId: '',
				amount: 0,
			};
		},
		mounted() {
			
			this.getusers();
		},
		onShow() {
			this.getAccountList();
		},
		onPullDownRefresh() {
			this.getAccountList((res) => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			getAccountList: function(callback){
				var that = this;
				base.base.request({
					data: {target_user_id: that.userId},
					url: 'account/index',
					sCallback: function(res){
						that.accountList = res.data.account_list;
						that.amount = res.data.amount;
						callback && callback(res);
					}
				})
			},
			
			getusers: function(){
				var that = this;
				base.base.request({
					data: {},
					url: 'binduser/users',
					sCallback: function(res){
						that.users = res.data;
					}
				})
			}
		}
	}
</script>

<style>
	
	.all-amount{
		color: #EA4A64;
		font-size: 60upx;
	}
	
	.asset-index{
		/* margin-bottom: 200px; */
		flex-direction: column;
		font-size: 28upx;
	}
	
	.amount{
		width: 100%;
		padding: 20upx;

		justify-content: space-between;
		line-height: 60upx;
		color: #BBBBBB;
		font-size: 26upx;
	}
	
	.uni-list{
		padding: 20upx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.uni-list-cell{
		margin-bottom: 20upx;
		color: #fff;
		border-radius: 10upx;
	}
	
	.uni-list:after, .uni-list-cell:after{
		content: none;
	}
	.add{
		text-align: center;
		padding: 0 20upx;
		color:rgba(255,255,255,1);
		margin-right: 35upx;
		background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
		font-size: 24upx;

	}
	
	.asset-index{
		width: 100%;
		flex: 1;
	}
	
	.uni-media-list-body{
		line-height: 84upx;
		
	}
	
	.uni-media-list-body{
		justify-content:space-between;
		flex-direction: row;
	}
</style>
